<template lang="">
  <div class="center">
    <div class="main" style="border: 0px solid #000;text-align: center;">
      <div class="top">
        <img src="../assets/images/home_1_07.png" alt="" style="width: 100%;">
      </div>
      <div class="bottom"
        style="border: 0px solid #000;margin-top: 10px;border-radius: 10px;overflow: hidden;display: flex;text-align: center;">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="7">
            <!-- 日历 -->
            <div class="left"
              style="border-radius: 10px;overflow: hidden;border: 0px solid #000;background-color: #fff;padding: 20px;margin-top: 10px;">
              <div class="top" style="text-align: left;">
                <img src="../assets/images/home_1_19.png" alt="">
                <span style="position: relative;top: -7px;left: 10px;">日历</span>
                <el-divider></el-divider>
              </div>
              <div class="bottom" style="margin-top: 40px;">
                <el-calendar v-model="value">
                </el-calendar>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="10" >
            <!-- 新闻资讯 -->
            <div class="middle" style="width: 100%;border: 0px solid #000;margin-top: 10px;">
              <div class="top"
                style="background-color: #fff;padding: 20px;height:310px;border-radius: 10px;overflow: hidden;">
                <div class="title" style="height: 15%;">
                  <div class="left" style="float: left;"><img src="../assets/images/home_1_14.png" alt=""><span
                      style="position: relative;top: -7px;left: 10px;">新闻资讯</span>
                  </div>
                  <div class="right" style="float: right;">
                    <el-button round>公司</el-button>
                    <el-button round>行业</el-button>
                  </div>
                </div>
                <div class="main" style="border: 0px solid #000;">
                  <div class="news" v-for="(item,index) in newsList" :key="index"
                    style="border: 0px solid #000;padding: 5px 0;height: 110px;display: flex;margin-top: 10px;">
                    <div class="img" style="width: 180px;border: 0px solid #000;"><img :src="item.imgUrl" alt=""
                        style="width: 180px;height: 110px;"></div>
                    <div class="ms" style="width: 460px;border: 0px solid #000;text-align: left;margin-left: 20px;">
                      <span><a :href="item.url" target="_blank">{{item.title}}</a></span><br>
                      <span
                        style="line-height: 25px;margin-top: 10px;display: block;color: #999;font-size: 14px;">{{item.name}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 业务领域 -->
              <div class="bottom"
                style="background-color: #fff;padding: 20px;border-radius: 10px;overflow: hidden;margin-top: 10px;">
                <div class="title" style="height: 15%;">
                  <div class="left" style="float: left;"><img src="../assets/images/business_area.png" alt=""><span
                      style="position: relative;top: -7px;left: 10px;">业务领域</span>
                  </div>
                </div>
                <div class="main" style="border: 0px solid #000;margin-top: 45px;">
                  <ul
                    style="list-style: none;margin: 0;border: 0px solid #000;padding: 0;display: flex;flex-direction: row; flex-wrap:wrap;width: 100%;justify-content:space-between;">
                    <li v-for="(item,index1) in imgList" :key="index1"
                      style="float: left;width:49% ;margin: 0;margin-right: 0px;border: 0px solid #000;height: 100%;">
                      <a :href="item.url" target="_blank"><img :src="item.imgUrl" style="width: 100%;"></a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="7">
            <div class="right"
              style="width: 100%;border: 0px solid #000;border-radius: 10px;overflow: hidden;margin-top: 10px;">
              <!-- 消息 -->
              <div class="top"
                style="background-color: #fff;padding: 20px;height:auto;border-radius: 10px;overflow: hidden;">
                <div class="title" style="height: 15%;">
                  <div class="left" style="float: left;"><img src="../assets/images/crm_40.png" alt=""><span
                      style="position: relative;top: -7px;left: 10px;">消息列表</span>
                  </div>
                </div>
                <div class="main" style="border: 0px solid #000;">
                  <ul
                    style="list-style: none;margin: 0;border: 0px solid #000;padding: 0;">
                    <li v-for="(item,index1) in newsList1" :key="index1"
                      style="float: left;width: 100%;margin: 0;margin-right: 5px;margin-top:20px;border: 0px solid #000;height: auto;text-align: left;">
                      <span
                        style="width: 25px;height: 25px;border: 0px solid #000;border-radius: 20px;background-color: #0060ff;color: #fff;display: block;">
                        <span style="position: relative;top: 1px;left: 5px;">合</span>
                      </span>
                      <span
                        style="margin-left: 10px;position: relative;top: -22px;left: 20px;">{{item.title}}</span><br>

                      <span
                        style="color: #999;font-size: 14px;text-align: left;margin-left: 30px;position: relative;top: -15px;left: 0px;">{{item.name}}</span>
                      <span
                        style="color: #999;font-size: 14px;float: right;position: relative;top: -15px;left: 0px;">{{item.time}}</span>

                      <el-divider></el-divider>
                    </li>

                  </ul>
                </div>
              </div>
              <!-- 今日工作 -->
              <div class="bottom"
                style="background-color: #fff;padding: 20px;border-radius: 10px;overflow: hidden;margin-top: 10px;">
                <div class="title" style="height: 5%;">
                  <div class="left" style="float: left;"><img src="../assets/images/home_1_23.png" alt=""><span
                      style="position: relative;top: -7px;left: 10px;">今日工作</span>
                  </div>
                </div>
                <div class="main" style="border:0px solid #000;margin-top:40px;">
                  <div class="work" v-for="(item,index) in workList" :key="index"
                    style="border: 0px solid #000;padding: 5px 0;height: auto;">
                    <div class="ms"
                      style="border: 0px solid #000;text-align: left;background-color: #f5f5f7;padding: 15px;border-radius: 10px;overflow: hidden;">
                      <span style="line-height: 25px;color: #999;font-size: 14px;">{{item.title}}</span><br>
                      <span>{{item.name}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

        </el-row>



      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: new Date(),
        newsList: [
          {
            id: 1,
            title: '热烈庆祝宁夏首家虚拟现实（VR）融合创新研究院成立',
            name: ' 2021年5月26日，由石嘴山工贸职业技术学院和武汉灵瑞科技集团有限公司联合创办的“虚拟现实（VR）融合创新研究院”揭牌仪式暨校企合作签约仪式在宁夏石嘴山工贸职业技术学院隆重举行',
            imgUrl: require('@/assets/images/news.png'),
            url: 'http://www.whlrjt.com/detail?id=12'
          },
          {
            id: 2,
            title: '灵瑞集团参加第九届中国水利信息化技术论坛',
            name: '2021年5月28日，以“信息化赋能水利‘十四五’新征程”为主题的第9届中国水利信息化技术论坛在山东省济南市隆重召开！',
            imgUrl: require('@/assets/images/news.jpg'),
            url: 'http://www.whlrjt.com/detail?id=13'
          },
        ],
        imgList: [
          {
            id: 1,
            imgUrl: require('@/assets/images/img_business_area2.jpg'),
            url: 'http://101.37.246.134:8021/'

          },
          {
            id: 2,
            imgUrl: require('@/assets/images/img_business_area1.jpg'),
            // url: 'http://101.37.246.134:8021/'
          },
          {
            id: 3,
            imgUrl: require('@/assets/images/img_business_area4-1.jpg'),
            // url: 'http://101.37.246.134:8021/'

          },
          {
            id: 4,
            imgUrl: require('@/assets/images/img_business_area4.jpg'),
            url: 'http://101.37.246.134:8015/'
          },
        ],
        workList: [
          {
            id: 1,
            title: '上午',
            name: '1、给50各科技公司打电话，寻找商机',
          },
          {
            id: 2,
            title: '下午',
            name: '1、给50各科技公司打电话，寻找商机2、拜访新客户',
          },

        ],
        newsList1: [
          {
            id: 1,
            title: '智能制造虚拟仿真实训合同',
            name: '张三',
            time: '昨天：20:20',
          },
          {
            id: 2,
            title: '智能制造虚拟仿真实训合同',
            name: '张三',
            time: '昨天：20:20',
          },
          // {
          //   id: 3,
          //   title: '智能制造虚拟仿真实训合同',
          //   name: '张三',
          //   time: '昨天：20:20',
          // },

        ]
      }
    }
  }
</script>
<style scoped>
  .main>>>.el-calendar-table tr td:first-child {
    border-left: 0px;
  }

  .main>>>.el-calendar-table tr:first-child td {
    border: 0px;
  }

  .main>>>.el-calendar-table td {
    border: 0px;
    transition: none;
  }

  .main>>>.el-calendar-table .el-calendar-day {
    height: 45px;
    border-radius: 45px;
    padding: 10px;
  }

  .main>>>.el-calendar-table td.is-selected {
    height: 45px;
    border-radius: 45px;
    background-color: #409eff;
    color: #fff;
  }

  .main>>>.el-calendar-table td.is-today {
    color: #161616;
  }
</style>